<template>
  <div>
    <el-dialog
      title="估价资料A-房屋面积信息"
      :visible.sync="dialogTableVisible"
      @closed="closeDialog"
      center
      width="600px"
      :append-to-body="appendParams"
    >
      <el-table :data="formList" v-loading="listLoading">
        <el-table-column
          property="TypeName"
          label="类型"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.TypeName }}</div>
          </template>
        </el-table-column>
        <el-table-column
          property="Number"
          label="间数"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.quantity"
              clearable
              :disabled="scope.row.disabled"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          property="RoomArea"
          label="面积(平方米)"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.RoomArea"
              ><el-button
                slot="append"
                icon="el-icon-delete"
                clearable
                v-if="isEdit"
                @click="removeData(scope.row, scope.$index)"
              ></el-button
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        v-if="isEdit"
        style="margin-top: 30px"
        type="flex"
        justify="space-between"
      >
        <el-row>
          <el-button icon="el-icon-plus" type="warning" @click="addData"
            >新增</el-button
          >
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.name"
              @change="addData"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-row>
        <el-button type="primary" @click="submitForm" v-if="!isShowLoading"
          >提交</el-button
        >
        <el-button type="primary" :loading="isShowLoading" v-else
          >提交中</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getRooms, saveRooms } from "@/api/qzyw/roomInfo";
export default {
  props: {
    appendParams: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      // 是否可编辑
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogTableVisible: false,
      formList: [],
      isShowLoading: false,
      listLoading: false,
      types: [
        {
          value: 0,
          name: "居室",
        },
        {
          value: 1,
          name: "方厅",
        },
        {
          value: 2,
          name: "厨房",
        },
        {
          value: 3,
          name: "厕所",
        },
        {
          value: 4,
          name: "橱柜",
        },
        {
          value: 5,
          name: "台院",
        },
        {
          value: 6,
          name: "杂房",
        },
        {
          value: 7,
          name: "过道",
        },
        {
          value: 8,
          name: "伙用",
        },
      ],
      value: 0,
      currentHID: "",
    };
  },
  mounted() {},
  methods: {
    closeDialog() {
      this.dialogTableVisible = false;
      this.$emit("changeRoomInformationState");
    },
    openDialog(HID) {
      this.listLoading = true;
      this.currentHID = HID;
      this.dialogTableVisible = true;
      getRooms({ HID }).then((res) => {
        if (res.success) {
          this.listLoading = false;
          this.formList = res.data;
          this.formList.forEach((el) => {
            //在.前补0操作
            if (!el.RoomArea.split(".")[0]) {
              el.RoomArea = "0" + el.RoomArea;
            }
            el.TypeName = el.Type.name;
            el.quantity = 1;
            el.disabled = true;
          });
        }
      });
    },
    addData() {
      let obj = {
        HID: this.currentHID,
        Type: { value: "", name: "" },
        Number: 0,
        TypeName: "",
        RoomArea: "",
        IsShare: 0,
        disabled: true,
        quantity: 1,
      };
      obj.Type.value = this.value;
      this.types.forEach((val) => {
        if (val.value == this.value) {
          obj.Type.name = val.name;
          obj.TypeName = val.name;
        }
      });
      this.formList.push(obj);
    },
    // addData({row}) {
    //     let number = row.quantity-0
    //     if(number-0>1) {
    //         let arr = this.formList.filter(el => {
    //             return el.Type.value == row.Type.value
    //         })
    //         if(number-arr.length>=1) {
    //             let idx = this.formList.findIndex(val=> { return val.Type==row.Type})
    //                 for (let i = 0; i < number-arr.length; i++) {
    //                     this.formList.splice(idx+i+1,0, {HID: row.HID, Type: row.Type, Number: 0,TypeName:row.TypeName, RoomArea: '',IsShare: 0, disabled: true})
    //                 }
    //         }
    //     } else {
    //         let idx = this.formList.findIndex(val=> { return val.Type==row.Type})
    //         let arr = this.formList.filter(val=> { return val.Type==row.Type})
    //         this.formList.splice(idx+1,arr.length-1)
    //     }

    // },
    removeData(row, index) {
      let i = this.formList.findIndex((val) => {
        return (val.Type = row.Type);
      });
      this.formList.splice(index, 1);
      if (this.formList.length > 0) {
        this.formList[i].Number - 1;
      }
    },
    submitForm() {
      this.isShowLoading = true;
      this.formList.forEach((el, index) => {
        this.types.forEach((val) => {
          if (el.TypeName == val.name) {
            el.Type = val.value;
          }
        });
        el.Number = index;
      });
      saveRooms(this.formList)
        .then((res) => {
          this.isShowLoading = false;
          if (res.success) {
            this.dialogTableVisible = false;
            this.msgSuccess("修改房间材料成功");
          } else {
            this.msgError(res.msg);
          }
        })
        .catch(() => {
          this.isShowLoading = false;
        });
    },
  },
};
</script>